<template>
  <div class="q-analysis">
    
    <div  v-for="(title, index) in titles" :key="title">
    <q-box
      anaType="all"
      :title="title"
      :remark="remarks[index]"
      :options="alloptions[index]"
      :values="allvalues[index]"
      :number="numbers[index]"
      :index="index"
    ></q-box>
  </div>
  
  <n-empty description="无答卷数据" v-show="isEmpty" style="margin-top: 20vh">
    <template #extra> 看看别的 </template>
  </n-empty>
  </div>
  
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import QBox from '@views/Questionnaire/QuestionAfter/components/QBox.vue';
import { Ques } from '@api/question';

const props = defineProps({
  id: {
    type: String,
    required: true,
  },
});

const id = Number(props.id); //问卷id
const titles = ref([]); //从后端获取的所有题目，每个元素代表一个题目
const remarks = ref([]); //从后端获取的所有题目提示，每个元素代表一个题目
const alloptions = ref([]); //从后端获取的所有题目选项，每个元素代表一个题目
const allvalues = ref([]); //从后端获取的所有题目的选择人数，每个元素代表一个题目
const numbers = ref([]); //从后端获取的所有题目的作答人数，每个元素代表一个题目

onMounted(() => {
  handleAnalysis();
});

const isEmpty = ref(true);
const handleAnalysis = () => {
  
  Ques.analyzeQ({
    id: id,
  }).then((res: any) => {
    console.log('res:', res);
    if (res.data.status == 400) {
      // isEmpty.value = true;
      console.log("wotule")
      console.log(isEmpty.value);
    } else {
      console.log('获取图表')
      isEmpty.value = false;
      console.log(isEmpty.value);
      titles.value = res.data.data.title;
      remarks.value = res.data.data.remark;
      alloptions.value = res.data.data.option;
      allvalues.value = res.data.data.values;
      numbers.value = res.data.data.number;
    }
  });
};
</script>

<style scoped lang="scss">
// .q-analysis {
//   width: 80%;
//   margin:auto;
//   border: solid 1px rgb(238, 238, 238);
//   border-radius: 10px;
//   box-shadow: 9px 9px 20px #dfdfdf, -9px -9px 20px #ffffff;
//   // background-color: #f1f1f1;
// }
</style>
